<template>
    <div class="outContainer">
        <div class="topBox">
            <div class="taskBox">
                <taskList :list="taskListData"></taskList>
            </div>
            <div class="historyBox">
                <history></history>
            </div>
        </div>
        <div class="bottomBox">
            <bottomBox></bottomBox>
        </div>
    </div>
</template>
<script>
import taskList from './components/taskList.vue';
import history from './components/history.vue';
import bottomBox from './components/bottomBox.vue';
export default {
    components:{
        taskList,
        history,
        bottomBox
    },
    data(){
        return {
            list:[
                {title:'123收到JFK洛杉矶的饭卡里说的附件是独立开发士大夫士大夫士大夫大师傅士大夫精神看到了附件是',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
                {title:'123',des:'5sdfsdf',icon:''},
            ],
            taskListData:[]
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            this.list.map((item,index)=>{
                if(index%4 == 0){
                    this.taskListData.push([])
                }
                this.taskListData[this.taskListData.length-1].push(item)
            })
        }
    }
}
</script>
<style scoped>
.topBox{
    display: flex;
}
.taskBox{
    width: 66.66%;
}
.historyBox{
    flex: 1;
    padding-left: 25px;
}
.bottomBox{
    margin-top: 40px;
}
</style>
